<!doctype html>
<html lang="en">
<head>
    <title>Code coverage report for components\select\dx-select.vue</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="../../prettify.css" />
    <link rel="stylesheet" href="../../base.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type='text/css'>
        .coverage-summary .sorter {
            background-image: url(../../sort-arrow-sprite.png);
        }
    </style>
</head>
<body>
<div class='wrapper'>
  <div class='pad1'>
    <h1>
      <a href="../../index.html">all files</a> / <a href="index.html">components/select/</a> dx-select.vue
    </h1>
    <div class='clearfix'>
      <div class='fl pad1y space-right2'>
        <span class="strong">0% </span>
        <span class="quiet">Statements</span>
        <span class='fraction'>0/16</span>
      </div>
      <div class='fl pad1y space-right2'>
        <span class="strong">0% </span>
        <span class="quiet">Branches</span>
        <span class='fraction'>0/14</span>
      </div>
      <div class='fl pad1y space-right2'>
        <span class="strong">0% </span>
        <span class="quiet">Functions</span>
        <span class='fraction'>0/4</span>
      </div>
      <div class='fl pad1y space-right2'>
        <span class="strong">0% </span>
        <span class="quiet">Lines</span>
        <span class='fraction'>0/16</span>
      </div>
    </div>
  </div>
  <div class='status-line low'></div>
<pre><table class="coverage">
<tr><td class="line-count quiet">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178</td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">&lt;template&gt;
	&lt;div class="dx-select"&gt;
		&lt;!-- 下拉框主体内容 --&gt;
		&lt;div 
			v-clickoutside="closeItems" 
			class="dx-select__content" 
		&gt;
			&lt;!-- 下拉选择框部分 --&gt;
			&lt;div 
				class="dx-select__input" 
				@click.stop="openItems"
			&gt;
				&lt;input 
					v-model="selectLabel" 
					class="dx-select__input--origin"
					:readonly="readonly" 
					type="text"  
					:placeholder="placeholder"
				&gt;
				&lt;!-- 下拉框指示器 --&gt;	
				&lt;!-- &lt;span class="dx-select-input-ind" :class="{open:isShow}"&gt;&lt;/span&gt; --&gt;
				&lt;i 
					class="icon iconfont dx-select__input--ind" 
					:class="[isShow ? 'dx-down' : 'dx-left']"
					aria-hidden="true"
				&gt;
				&lt;/i&gt;	
			&lt;/div&gt;
			&lt;!-- 下拉列表 --&gt;
			&lt;ul 
				v-show="isShow"
				class="dx-select__ul"  
				@click="selectItem($event)"
			&gt;
				&lt;li 
					v-for="(item,index) in items" 
					:key="index"
					:data-index="index"
					:class="{ 'is-selected': index === selecteIndex }"  
					class="dx-select__ul--li" 
				&gt;
					{{isObject ? item[labelKey] : item}}
				&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/div&gt;		
	&lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
	import clickoutside from '@/directives/clickoutside.js'
	export default{
		name: 'DxSelect',
		directives: { clickoutside },
		props: {
			items: Array, // 传入的数据
			labelKey: String, // 传入的数组元素为对象时标签键值
			valueKey: String, // 传入的数组元素为对象时实际选择的键值
			value: {}, // select组件绑定的父组件值
			readonly: { // 是否为只读，默认为禁止
				type: Boolean,
				default: true
			},
			onSelect: Function, // 数据选择后的回调函数，为option选项值
			placeholder: String,
			remote: Boolean, // 是否为远程加载数据显示标志
			remoteMethod: Function // 如果设置为从服务器端加载，则为回调函数，回调值
		},
		data() {
<span class="cstat-no" title="statement not covered" >			return {</span>
				isShow: false,
				selecteIndex: '-1',
				selectLabel: this.value
			}
		},
		computed: {
			// 判断items是否为对象数组或原生数组
			isObject: function() <span class="fstat-no" title="function not covered" >{</span>
				let isObject = <span class="cstat-no" title="statement not covered" >Object.prototype.toString.call(this.items[0]).toLowerCase() ===</span>
					'[object object]'
				// 如果输入items是对象数组，则进行一些检查
<span class="cstat-no" title="statement not covered" >				if (isObject) {</span>
<span class="cstat-no" title="statement not covered" >					if (this.labelKey &amp;&amp; this.valueKey) {</span>
<span class="cstat-no" title="statement not covered" >						if (typeof this.items[0][this.labelKey] === 'undefined' ||</span>
							typeof this.items[0][this.valueKey] === 'undefined') {
<span class="cstat-no" title="statement not covered" >							throw new Error('The label-key and label-vlaue attrs not find in items[0] object!')</span>
						}
					} else {
<span class="cstat-no" title="statement not covered" >						throw new Error('If the items is object array,the label-key and label-vlaue attrs is reuqired!')</span>
					}
				}
<span class="cstat-no" title="statement not covered" >				return isObject</span>
			}
		},
		methods: {
			closeItems: function() <span class="fstat-no" title="function not covered" >{</span>
<span class="cstat-no" title="statement not covered" >				this.isShow = false</span>
			},
			openItems: function() <span class="fstat-no" title="function not covered" >{</span>
<span class="cstat-no" title="statement not covered" >				this.isShow = true</span>
			},
			// 选择列表时的处理函数,采用代理函数
			selectItem: function($event) <span class="fstat-no" title="function not covered" >{</span>
				let item
				// 取选择的item上index
<span class="cstat-no" title="statement not covered" >                this.selecteIndex = parseInt($event.target.getAttribute('data-index'))</span>
                // 根据index取得相应的item
<span class="cstat-no" title="statement not covered" >				item = this.items[this.selecteIndex]</span>
				// 根据items中的数据类型取相应的值
				// selectValue = this.isObject ? item[this.valueKey] : item
<span class="cstat-no" title="statement not covered" >				this.selectLabel = this.isObject ? item[this.labelKey] : item</span>
<span class="cstat-no" title="statement not covered" >				this.$emit('input', item)</span>
<span class="cstat-no" title="statement not covered" >				this.onSelect &amp;&amp; this.onSelect(item)</span>
<span class="cstat-no" title="statement not covered" >				this.closeItems()</span>
			}
		}
	}
&lt;/script&gt;
&lt;style lang="scss"&gt;
	@include B(select) {
		position: relative;
		font-size: $--dx-select-font-size;
		z-index: 1;
		display: inline-block;
		min-width: 6rem;
		max-width: 20rem;
		@include E(content) {
			position: relative;
		}
&nbsp;
		@include E(input) {
			/*自定义input框标签样式*/
			@include M(origin) {
				padding-left: 1rem;
				width: 100%;
				border: 0.1rem solid #b3b3b3;
				font-size: 1.6rem;
				background-color: $--dx-select-input-origin-background-color;
				line-height: 3rem;
				border-radius: 0.5rem;
				cursor: pointer;
			}
			/*下拉列表箭头指示器样式*/
			@include M(ind) {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 1rem;
				color: $--dx-select-input-ind-color;
			}
		}
		/*下拉列表ul样式*/
		@include E(ul) {
			position: absolute;
			margin-top: 0.3rem;
			width: 100%;
			cursor: pointer;
			background-color: $--dx-select-ul-background-color;
			z-index: 999;
			font-size: $--dx-select-ul-font-color;
			color: $--dx-select-ul-color;
			border-radius: 0.2rem;
			box-shadow: 0 0 0.3rem #aaa;
			padding: 0;
			text-align: left;
			/*下拉列表li样式*/
			@include M(li) {
				padding: 0.5rem 0rem 0.5rem 1rem;
				list-style: none;
				&amp;:hover {
					color: $--dx-select-ul-color-hover;
					background-color: $--dx-select-ul-background-color-hover;
				}
				@include when(selected) {
					color: $--dx-select-ul-color-hover;
				}
			}
		}
	}
&lt;/style&gt;</pre></td></tr>
</table></pre>
<div class='push'></div><!-- for sticky footer -->
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
  Code coverage
  generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Sun Feb 24 2019 15:08:50 GMT+0800 (中国标准时间)
</div>
</div>
<script src="../../prettify.js"></script>
<script>
window.onload = function () {
        if (typeof prettyPrint === 'function') {
            prettyPrint();
        }
};
</script>
<script src="../../sorter.js"></script>
</body>
</html>
